<template>
  <el-dialog :title="title" :visible.sync="openDataScope" width="500px" append-to-body>
    <hk-form
      ref="hkFormRef"
      :formLabels="formObj.formLabels"
      :rules="formObj.formRules"
      :data="formObj.formData"
      :dict-list="formObj.dictList"
      :label-width="formObj.labelWidth"
      :btn-hidden="formObj.btnHidden"
      @handleEvent="handleEvent">
      <template #filter-deptIds>
        <el-tree
          style="height: 25vh; overflow: auto"
          class="tree-border"
          :data="deptOptions"
          show-checkbox
          ref="menuRef"
          node-key="id"
          :check-strictly="false"
          empty-text="加载中，请稍候"
          :props="defaultProps"
          @check="handleCheckEvent"></el-tree>
      </template>
    </hk-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitDataScope">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import HkForm from '@/components/HKForm'
import { dataScope } from '@/api/system/role'

export default {
  name: 'dataAccess',
  dicts: ['data_scope'],
  components: { HkForm },
  props: {
    title: {
      type: String,
      default() {
        return '新增'
      },
    },
    form: {
      type: Object,
      default() {
        return {}
      },
    },
    menus: {
      type: Array,
      default() {
        return []
      },
    },
  },
  data() {
    return {
      openDataScope: false,
      dataScopeOptions: [],
      formObj: {
        btnHidden: true,
        labelWidth: '100',
        formLabels: [
          { label: '角色名称', field: 'name', type: 'input', span: 24, disabled: true },
          { label: '权限字符', field: 'code', type: 'input', span: 24, disabled: true },
          {
            label: '权限范围',
            field: 'dataScope',
            type: 'select',
            list: 'dataScopeList',
            span: 24,
          },
          {
            label: '数据权限',
            field: 'deptIds',
            type: 'slot',
            span: 24,
            hidden: true,
          },
        ],
        formRules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          code: [{ required: true, message: '请输入权限字符', trigger: 'blur' }],
          datascope: [{ required: true, message: '请选择权限范围', trigger: 'blur' }],
        },
        dictList: {
          dataScopeList: [],
        },
        formData: {},
      },
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      deptOptions: [],
      deptIds: null,
    }
  },
  created() {
    let { id, name, dataScope, deptIds, code } = this.form
    this.formObj.formData = {
      id: id,
      name: name,
      code: code,
      dataScope: dataScope,
      deptIds: deptIds,
    }
    this.formObj.dictList.dataScopeList = this.dict.type.data_scope
  },
  watch: {
    menus: {
      handler(newVal) {
        this.deptOptions = newVal
        this.formObj.formData.deptIds = newVal
      },
      deep: true,
      immediate: true,
    },
    form: {
      handler(newVal) {
        let { id, name, code, dataScope, deptIds } = newVal
        this.formObj.formData = {
          id: id,
          name: name,
          code: code,
          dataScope: dataScope,
          deptIds: deptIds,
        }
        this.deptIds = deptIds
        if (this.deptIds) {
          this.deptIds.forEach((v) => {
            this.$nextTick(() => {
              if (this.$refs.menuRef) {
                this.$refs.menuRef.setChecked(v, true, false)
              }
            })
          })
        }
        if (this.formObj.formData.dataScope != '2') {
          this.handleHidden(true)
        } else {
          this.handleHidden(false)
        }
      },
    },
  },
  methods: {
    dataScopeSelectChange() {},
    /**
     * 树节点被点击时触发事件
     * */
    handleCheckEvent(currentObj, allCheckedObj) {
      this.formObj.formData.deptIds = allCheckedObj.checkedKeys
    },

    /**
     * 判断是否隐藏
     * */
    handleHidden(boolean) {
      this.formObj.formLabels.find((i) => {
        return i.field == 'deptIds'
      }).hidden = boolean
    },
    /**
     * 表单项触发事件
     * */
    handleEvent(obj) {
      this.formObj.formData[obj.field] = obj.value
      if (obj.field == 'dataScope' && obj.value == '2') {
        this.handleHidden(false)
      } else {
        this.handleHidden(true)
      }
    },
    async submitDataScope() {
      let res = await this.$refs.hkFormRef.handleFormSubmit('formLabels')
      dataScope(res).then((res) => {
        this.$modal.msgSuccess('保存成功')
        this.openDataScope = false
        this.$refs.hkFormRef.resetForm('formLabels')
        this.$emit('submitForm', true)
      })
    },
    handleCancel() {
      this.openDataScope = false
      this.$refs.hkFormRef.resetForm('formLabels')
    },
  },
}
</script>

<style scoped></style>
